<template>
  <div>
    <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column
        v-loading="loading"
        align="center"
        label="tid"
        width="65"
        element-loading-text="请给我点时间！"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="300px" label="任务地点">
        <template slot-scope="{row}">
          <span>{{ row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column width="110px" align="center" label="是否完成">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="结束时间" width="95">
        <template slot-scope="scope">
          <span>{{ scope.row.pageviews }}</span>
        </template>
      </el-table-column>

      <el-table-column width="180px" align="center" label="开始时间">
        <template slot-scope="scope">
          <span>{{ scope.row.timestamp }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button v-if="scope.row.author" type="primary" @click="handleSubmit(scope.row)">提交文档</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 隐藏的文件输入元素 -->
    <input ref="fileInput" type="file" style="display: none" @change="handleFileChange">
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      currentRow: null,
      uid: '',
      title: ''
    }
  },
  methods: {
    handleSubmit(row) {
      this.currentRow = row
      // 使用 $nextTick 确保 $refs 已经被正确挂载
      this.$nextTick(() => {
        this.$refs.fileInput.click() // 触发文件选择对话框
      })
    },
    handleFileChange(event) {
      const file = event.target.files[0]
      this.uid = sessionStorage.getItem('uid')
      const reader = new FileReader()
      reader.onload = (e) => {
        const fileContent = e.target.result
        // 假设文件标题在第一行
        this.title = fileContent.split('\n')[0]
      }
      if (file) {
        const formData = new FormData()
        const fileName = file.name
        formData.append('file', file)
        formData.append('title', fileName)
        formData.append('uid', this.uid)
        formData.append('tid', this.currentRow.id) // 使用当前行的 ID

        const requestOptions = {
          method: 'POST',
          headers: {
            'User-Agent': 'Apifox/1.0.0 (https://apifox.com)',
            'Authorization': 'Bearer ' + sessionStorage.getItem('token')
          },
          body: formData,
          redirect: 'follow'
        }

        fetch('http://1.92.204.101:5000/report/submit_report', requestOptions)
          .then(response => response.text())
          .then(result => {
            console.log(result)
            this.$message.success('文档提交成功')
          })
          .catch(error => {
            console.log('error', error)
            this.$message.error('文档提交失败')
          })

        // 清空文件输入，以便再次选择相同文件时触发change事件
        this.$refs.fileInput.value = null
      }
    }

  }
}
</script>
